<template>
  <div class="px-2">
    <h2
      class="px-4 py-3 pt-0 text-center text-xl flex items-center justify-between"
    >
      <p>总添加数: {{ todos.length || 0 }}</p>
      <button
        @click="addTodo"
        class="px-4 py-2 bg-gray-700 text-xs rounded-md text-light-400"
      >
        添加
      </button>
    </h2>
    <div class="flex h-10 items-center h-10 mb-3">
      <label class="min-w-15">姓名: </label>
      <input
        class="border w-full rounded-md indent-xs h-full"
        type="text"
        v-model="title"
      />
      <!-- <button
        class="whitespace-nowrap px-2 bg-blue-400 h-full ml-2 rounded-md text-light-100"
        v-if="active < all"
        @click="clear"
      >
        清理
      </button> -->
    </div>

    <div class="flex h-10 items-center h-10 mb-3">
      <label class="min-w-15">组: </label>
      <input
        class="border w-full rounded-md indent-xs h-full"
        type="text"
        v-model="group"
      />
      <!-- <button
        class="whitespace-nowrap px-2 bg-blue-400 h-full ml-2 rounded-md text-light-100"
        v-if="active < all"
        @click="clear"
      >
        清理
      </button> -->
    </div>

    <div class="flex h-10 items-center h-10 mb-3">
      <label class="min-w-15">身份证: </label>
      <input
        class="border w-full rounded-md indent-xs h-full"
        type="text"
        v-model="idcard"
      />
      <!-- <button
        class="whitespace-nowrap px-2 bg-blue-400 h-full ml-2 rounded-md text-light-100"
        v-if="active < all"
        @click="clear"
      >
        清理
      </button> -->
    </div>

    <div class="flex h-10 items-center h-10">
      <label class="min-w-15">日期: </label>
      <input
        class="border w-full rounded-md indent-xs h-full"
        type="text"
        v-model="date"
      />
      <!-- <button
        class="whitespace-nowrap px-2 bg-blue-400 h-full ml-2 rounded-md text-light-100"
        v-if="active < all"
        @click="clear"
      >
        清理
      </button> -->
    </div>

    <ul v-if="todos.length" class="pt-4 mb-30">
      <li
        v-for="todo in todos"
        class="leading-10 border mb-3 rounded-md underline-dark-200 flex flex-col items-start px-3"
        :key="todo?.id"
        @click="todo.done = !todo.done"
      >
        <!-- <input type="checkbox" v-model="todo.done" class="mr-3" /> -->
        <p class="w-full border-b flex justify-between items-center">
          <span> 组: {{ todo.group }} </span>
          <img
            @click="copy(todo.group)"
            class="w-6 h-6 inline-block"
            src="@/assets/copy.png"
            alt=""
          />
        </p>
        <p class="w-full border-b flex justify-between items-center">
          <span>姓名: {{ todo.title }}</span>

          <img
            @click="copy(todo.title)"
            class="w-6 h-6 inline-block"
            src="@/assets/copy.png"
            alt=""
          />
        </p>
        <p class="w-full border-b flex justify-between items-center">
          <span> id: {{ todo.idcard }} </span>
          <img
            @click="copy(todo.idcard)"
            class="w-6 h-6 inline-block"
            src="@/assets/copy.png"
            alt=""
          />
        </p>
        <p class="w-full flex justify-between items-center">
          <span> 日期: {{ todo.date }} </span>
          <img
            @click="copy(todo.date)"
            class="w-6 h-6 inline-block"
            src="@/assets/copy.png"
            alt=""
          />
        </p>
      </li>
    </ul>

    <!-- <ul v-if="todos.length" class="pt-4">
      <li
        v-for="todo in todos"
        class="h-10 leading-10 border mb-3 rounded-md underline-dark-200 flex items-center px-3"
        :key="todo?.id"
        :class="{
          'line-through': todo.done,
        }"
        @click="todo.done = !todo.done"
      >
        <input type="checkbox" v-model="todo.done" class="mr-3" />
        <span :class="{ done: todo.done }">{{ todo.title }}</span>
      </li>
    </ul> -->

    <div v-else class="p-3 text-center">暂无数据</div>

    <!-- <div
      class="border inline-flex items-center mt-3 px-3 py-2 rounded-md text-dark-500/50 justify-center w-full"
    >
      全选<input class="px-3 ml-2" type="checkbox" v-model="allDone" />
      <span class="inline-block ml-2">{{ active }}/{{ all }}</span>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { useTodos } from './useTodos';
import { copy } from '@/utils/web';
const {
  title,
  addTodo,
  clear,
  all,
  allDone,
  active,
  todos,
  idcard,
  group,
  date,
} = useTodos();

let grade = 1;
onMounted(() => {
  grade += 1;
  localStorage.setItem('grade', grade.toString());
});
</script>

<style scoped></style>
